let div = document.querySelectorAll('.wrap ul li>div')
let personal = document.querySelector('.userss')
let ul = document.querySelector('.good ul')
$('.left span:first-child').click(function(){
    location.href="./indexs.html"
})
//    console.log(div)
// 给li鼠标移入移出事件
let copy;
$('.daohan .kou').hover(function (e) {
    // 鼠标移入。下拉显示
    let puts = e.target.getAttribute('index')
    // console.log(puts);

    $(this).parents().find('.wrap').stop().slideDown();
    // if (e.target.getAttribute('index') == 1) {
    switch (puts) {
        case '1':
            getLists();
            async function getLists() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 11
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            break; //停止执行，跳出switch
        case '2':
            getListsd();
            async function getListsd() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 12
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("VIP会员");
            break; //停止执行，跳出switch
        case '3':
            getListsdl();
            async function getListsdl() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 11
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch
        case '4':
            getListsdk();
            async function getListsdk() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 12
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch
        case '5':
            getListsdb();
            async function getListsdb() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 11
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch
        case '6':
            getListsdm();
            async function getListsdm() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 12
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch
        case '7':
            getListsdp();
            async function getListsdp() {
                let res4 = await pAjax({
                    url: './severs/list.php',
                    data: {
                        pid: 11
                    },
                    dataType: 'json',
                })

                let data4 = res4.data;

                let str4 = '';
                data4.forEach(element => {
                    str4 += ` <div class="pos">
                <div class="pos-1">
                    <img src="${element.imgpath.split('==========')[0]}" alt="">
                </div>
                <div class="pos-2">
                 ${element.introduce.split('==')[0]}
                </div>
             </div>`
                });
                document.querySelector('.put').innerHTML = str4;
            }
            // console.log("管理员");
            break; //停止执行，跳出switch

        default: //上述条件都不满足时，默认执行的代码
            console.log("游客");
    }
    // }

}, function () {
    // console.log("无敌1")
    $(this).parents().find('.wrap').stop().slideUp();
})
$('.wrap').hover(function () {
    $(this).parents().find('.wrap').stop().slideDown();
}, function () {
    $(this).parents().find('.wrap').stop().slideUp();

})
personal.onclick = function () {
    delCookie('username')
    location.href = "./login.html"
}
if (getCookie('username')) {
    document.querySelector('.user').style.display = "block";
    document.querySelector('.user').innerHTML = `欢迎${getCookie('username')}来到vivo商城`
}
getListsdpz();
async function getListsdpz() {
    let res4 = await pAjax({
        url: './severs/list.php',
        data: {
            pid: '11 or pid = 12 or pid = 8'
        },
        dataType: 'json',
    })

    let data4 = res4.data;
// console.log(data)
    let str4 = '';
    data4.forEach(element => {
        str4 += ` <li>
        <div class="img">
            <img src="${element.imgpath.split('==========')[0]}" alt="">
            <p>
            ${element.introduce.split('==')[0]}
            </p>
        </div>
        <p>
        ${element.introduce.split('==')[1]}
        </p>
        <b>￥${element.price}</b>
    </li>`
    });
    document.querySelector('.good ul').innerHTML = str4;
    //给每个li添加事件
}
layui.use(['laypage', 'layer'], function () {
    var laypage = layui.laypage,
        layer = layui.layer;

    // 发起ajax请求
    async function getList() {
        let res = await pAjax({
            url: './severs/list.php',
            data:{
                pid:'11 or pid = 8 or pid =12 or pid = 6 or pid = 7 or pid = 9 or pid = 10'
            },
            dataType:'json'
        })
        let {
            data
        } = res;
        // console.log(data);
        //调用分页
        laypage.render({
            elem: 'really',
            count:data.length,
            limit: 12,
            limits: [5, 10, 20],
            layout: ['count', 'prev', 'page', 'next', 'limit','skip'],
            jump: function (obj) {
                // console.log(obj);
                //模拟渲染
                document.querySelector('.good ul').innerHTML = function () {
                    var arr = [],
                        thisData = data.concat().splice(obj.curr * obj.limit - obj
                            .limit, obj.limit);

                    layui.each(thisData, function (index, element) {
                        // arr.push('<li>' + item + '</li>');
                        arr.push(` <li>
                    <div class="img">
                        <img src="${element.imgpath.split('==========')[0]}" alt="" data-id="${element.id}">
                        <p>
                        ${element.introduce.split('==')[0]}
                        </p>
                    </div>
                    <p>
                    ${element.introduce.split('==')[1]}
                    </p>
                    <b>￥${element.price}</b>
                </li>`)

                    });
                    // console.log(arr.join(''));
                    return arr.join('');
                }();
            }
        });

    }
    getList()
});
$('.good ul').on('click', function (e) {
    // 判断点击的是否是a标签
    if (e.target.nodeName === 'IMG') {
        // 将商品的id存储在sessionStorage
        // console.log(e.target.dataset.id);
        sessionStorage.setItem('goodsId',e.target.dataset.id);
        // 跳转至详情页面
        location.href = './detail.html';
    }
})